<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://www.flotcharts.org/flot/jquery.flot.js"></script>
    </head>
    <body>
        <div id="placeholder"></div>
        <div id="main_container"> 
            <button id="target"> come </button>
        </div>

        <script>
            $().ready(function() {
                var vx = 0, vy = 0, x, y;
                var distance = [];
                var count = 0;


                $('#main_container').click(function() {
                    $("#placeholder").hide();
                    var tx = $('#target').position().left + $('#target').outerWidth() / 2;
                    var ty = $('#target').position().top + $('#target').outerHeight() / 2;
                    $('#main_container').mousemove(function(e) {
                        if (x && y) {
                            vx = e.pageX - x,
                                    vy = e.pageY - y;
                        }
                        x = e.pageX,
                                y = e.pageY;
                        dx = tx - x;
                        dy = ty - y;
                        //console.log(x, y);
                        distance.push([count++, Math.sqrt(dx * dx + dy * dy)]);
                    });
                });

                $('#target').mouseenter(function() {
                    $('#main_container').unbind('mousemove');
                    $("#placeholder").show();
                    $.plot("#placeholder", [distance]);
                    console.log(distance);
                    distance = [];
                });
            });
        </script>
    </body>
</html>
